<template>
  <view>
    <view class="product-window"
          :class="(attr.cartAttr === true ? 'on' : '')">
      <view class="textpic acea-row row-between-wrapper">
        <view class="pictrue" @click="showImg()">
          <image :src="attr.productSelect.image"></image>
        </view>
        <view class="text">
          <view class="line1">
            {{ attr.productSelect.store_name }}
          </view>
          <view class="money font-color">
            <view class="acea-row row-middle">
              ￥
              <text class="num">{{ attr.productSelect.price }}</text>
            </view>
            <text class="stock">库存: {{ attr.productSelect.stock }}</text>
          </view>
        </view>
        <view class="iconfont icon-guanbi" @click="closeAttr"></view>
      </view>
      <view class="rollTop">
        <view class="dateBox" v-if="dateList">
          <view class="monthTitle">
            <view v-for="(item, index) in dateList" :key="index" @click="dateSelect(index)">
              {{ item.month }}月
            </view>
            <view class="checkLine"></view>
            <view class="checkedLine" :style="{ left: dateTitleMargin }"></view>
          </view>
          <view class="dateTitle">
            <view>一</view>
            <view>二</view>
            <view>三</view>
            <view>四</view>
            <view>五</view>
            <view>六</view>
            <view>日</view>
          </view>
          <view class="dateListBox">
            <view class="dateList" v-for="(item, index) in dateList" :key="index"
                  :style="{ 'margin-left': (index > 0 ? '0' : dateListMargin) }">
              <view class="dateItemBox" :class="(index == date_active && indexs == day_active) ? 'active' :''" v-for="(items, indexs) in item.dayList"
                    :key="indexs" @click="dateCheck(index, indexs, items.id)" :style="{opacity: (items.id ? 1 : 0.6) }">
                <view class="dateCount" v-if="items.day">{{ !items.id ? '&nbsp' : '库存:' + items.count }}</view>
                <view class="dateDay" v-if="items.day">{{ items.day }}</view>
                <view class="datePrice" v-if="items.day"> {{ !items.id ? '&nbsp' : '￥' + items.price }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
  </view>
</template>

<script>
import colors from "@/mixins/color";

export default {
  mixins: [colors],
  props: {
    attr: {
      type: Object,
      default: () => {
      }
    },
    dateList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dateTitleMargin: '0px',
      dateListMargin: '0',
      day_active: -1,
      date_active:-1,
    };
  },
  mounted() {

  },
  methods: {
    //关闭弹窗
    closeAttr: function () {
      this.$emit('myevent');
    },

    showImg() {
      this.$emit('getImg');
    },
    dateSelect(multiple) {
      this.dateListMargin = -(100 * multiple) + '%';
      this.dateTitleMargin = 'calc((100% / 7 + 4%) * ' + multiple + ')';
    },
    dateCheck(key, keys, id) {
      let that = this
      if (!this.dateList[key].dayList[keys].id) return;
      this.dateList.forEach(function (item, index) {
        item.dayList.forEach(function (items, indexs) {
          if (key == index && keys == indexs && items.id) {
            that.date_active = index
            that.day_active = indexs

            items.kc = true;
          } else {
            items.kc = false;
          }
        });
      });
      this.$forceUpdate();
      this.$emit('setDateId', id);
    }
  }
}
</script>

<style scoped lang="scss">
.active {
  background: rgb(239, 248, 241) !important;
  border: 1px rgba(29, 176, 252, 1) solid !important;
}

.dateBox {
  margin-top: 16px;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.monthTitle {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding-bottom: 2px;
}

.monthTitle > view:not(.checkLine):not(.checkedLine) {
  padding: 6px 12px;
  width: calc(100% / 7);
  margin-right: 4%;
  font-size: 13px;
}

.dateTitle {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  margin: 4px 0;
}

.dateTitle > view {
  width: calc(100% / 7);
  font-size: 12px;
}

.checkLine {
  width: 100%;
  height: 1px;
  background-color: #9e9e9e40;
  position: absolute;
  bottom: 0;
}

.checkedLine {
  width: calc(100% / 7);
  height: 2px;
  background-color: rgba(29, 176, 252, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: left 300ms;
}

.dateListBox {
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
}

.dateList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  transition: margin-left 300ms;
}

.dateItemBox {
  width: calc(100% / 7);
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px white solid;
  background: none;
  transition-property: background, border;
  transition-duration: 300ms;
}

.dateCount {
  width: 100%;
  transform: scale(0.8);
  white-space: nowrap;
}

.dateDay {
  width: 100%;
  font-size: 14px;
}

.datePrice {
  width: 100%;
  transform: scale(0.8);
  white-space: nowrap;
  color: #FD502F;
}


.vip-money {
  color: #282828;
  font-size: 28rpx;
  font-weight: 700;
  margin-left: 6rpx;
}

.vipImg {
  width: 68rpx;
  height: 27rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.product-window {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: #fff;
  z-index: 100;
  border-radius: 16rpx 16rpx 0 0;
  transform: translate3d(0, 100%, 0);
  transition: all .3s cubic-bezier(.25, .5, .5, .9);
  padding-bottom: 140rpx;
  padding-bottom: calc(140rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}

.product-window.on {
  transform: translate3d(0, 0, 0);
}

.product-window.join {
  padding-bottom: 30rpx;
}

.product-window.joinCart {
  padding-bottom: 30rpx;
  z-index: 10000;
}

.product-window .textpic {
  padding: 0 80rpx 0 30rpx;
  margin-top: 29rpx;
  position: relative;
}

.product-window .textpic .pictrue {
  width: 150rpx;
  height: 150rpx;
}

.product-window .textpic .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.product-window .textpic .text {
  width: 470rpx;
  font-size: 28rpx;
  color: #202020;
}

.product-window .textpic .text .money {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.product-window .textpic .text .money .num {
  font-size: 36rpx;
}

.product-window .textpic .text .money .stock {
  color: #999;
  margin-left: 6rpx;
  margin-right: 20rpx;
}

.product-window .textpic .iconfont {
  position: absolute;
  right: 30rpx;
  top: -5rpx;
  font-size: 35rpx;
  color: #8a8a8a;
}

.product-window .rollTop {
  max-height: 500rpx;
  overflow: auto;
  margin-top: 36rpx;
}

.product-window .productWinList .item ~ .item {
  margin-top: 36rpx;
}

.product-window .productWinList .item .title {
  font-size: 30rpx;
  color: #999;
  padding: 0 30rpx;
}

.product-window .productWinList .item .listn {
  padding: 0 30rpx 0 16rpx;
}

.product-window .productWinList .item .listn .itemn {
  border: 1px solid #F2F2F2;
  font-size: 26rpx;
  color: #282828;
  padding: 7rpx 33rpx;
  border-radius: 25rpx;
  margin: 20rpx 0 0 14rpx;
  background-color: #F2F2F2;
}

.product-window .productWinList .item .listn .itemn.on {
  color: rgba(29, 176, 252, 1);
  background: rgba(9, 139, 243, 0.1);
  border-color: rgba(29, 176, 252, 1);
}

.product-window .productWinList .item .listn .itemn.limit {
  color: #999;
  text-decoration: line-through;
}

.product-window .cart {
  margin-top: 36rpx;
  padding: 0 30rpx;
  align-items: center;
}

.product-window .cart .title {
  font-size: 30rpx;
  color: #999;
}

.product-window .cart .carnum {
  height: 54rpx;

  .stock {
    font-size: 20rpx;
    line-height: 54rpx;
    color: #aaa;
  }

  .line {
    padding: 0 6rpx;
  }
}

.product-window .cart .carnum .iconfont {
  font-size: 25rpx;
}

.product-window .cart .carnum view {
  // border: 1px solid #a4a4a4;
  width: 84rpx;
  text-align: center;
  height: 100%;
  line-height: 54rpx;
  color: #282828;
  font-size: 45rpx;
}

.product-window .cart .carnum .reduce {
  border-right: 0;
  border-radius: 6rpx 0 0 6rpx;
  line-height: 48rpx;
  font-size: 60rpx;
}

.product-window .cart .carnum .reduce.on {
  // border-color: #e3e3e3;
  color: #DEDEDE;
}

.product-window .cart .carnum .plus {
  border-left: 0;
  border-radius: 0 6rpx 6rpx 0;
  line-height: 46rpx;
}

.product-window .cart .carnum .plus.on {
  // border-color: #e3e3e3;
  color: #dedede;
}

.product-window .cart .carnum .num {
  background: rgba(242, 242, 242, 1);
  color: #282828;
  font-size: 28rpx;
}

.product-window .joinBnt {
  font-size: 30rpx;
  width: 620rpx;
  height: 86rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 86rpx;
  color: #fff;
  margin: 21rpx auto 0 auto;
}

.product-window .joinBnt.on {
  background-color: #bbb;
  color: #fff;
}
</style>
